import React, {
    Component
} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {setNavIndex} from '../../../actions/headers/index';
import Select from 'antd/lib/select'
var Icon = require('antd/lib/icon')
const Option = Select.Option
import {FormattedMessage} from 'react-intl';

class Sort extends Component {
    handleChange = (value) => {
        this.props.setOrderBy(value)
    }
    changeSort = (value) => {
        this.props.changeListType(value)
    }

    componentDidMount() {
    }

    render() {
        return (
            <div className={this.props.skin == 'jewelry' ? 'sort sort-extra' : 'sort'}>
                {
                    this.props.searchIn?(
                            <div className='search-header'>
                                <span className='title'>SEARCH</span>
                                <span className='type'>"{this.props.searchIn}"</span>
                                <span className='total'>{this.props.total} result has been found</span>
                            </div>
                        ):null
                        
                }
                <span className='title'>
                    <FormattedMessage id='product_sort' description='Sort By' defaultMessage='Sort By'/>
                </span>
                <Select size="large" value={this.props.orderBy} style={{ width: 200 }} onChange={this.handleChange}>
                    <Option style={{ width: 200 }} value="salesHigh"> sales volume:high to low </Option>
                    <Option style={{ width: 200 }} value="newest"> Newest Arrivals </Option>
                    <Option style={{ width: 200 }} value="priceHigh"> Price:High to Low </Option>
                    <Option style={{ width: 200 }} value="priceLow"> Price:Low to High </Option>
                </Select>

                <div className='sortType'>
                    <Icon
                        onClick={()=>this.changeSort(1)}
                        className={this.props.listType==1?'sortType-choose':''}
                        type="appstore-o" />
                    <Icon
                        onClick={()=>this.changeSort(2)}
                        className={this.props.listType==2?' sortType-choose':''}
                        type="bars" />
                </div>
                {
                    this.props.total==0 ? '':
                    <span className='sortPageNumber'>
                        Showing {(this.props.currentPage-1)*this.props.size+1} - 
                        {(this.props.currentPage*this.props.size)>this.props.total?
                            this.props.total:
                            this.props.currentPage*this.props.size} of {this.props.total} items</span>
                }</div>
        )
    }
}

const mapStateToProps = ({}) => ({

});

const mapDispatchToProps = (dispatch) => {
    return {
        setNavIndex: bindActionCreators(setNavIndex, dispatch),
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Sort)
